<template>
    <div>
        <el-form
            ref="form"
            v-loading="isLoading"
            :model="bookInfo"
            label-width="5rem"
            :rules="rules"
            element-loading-text="表单加载中..."
        >
            <el-form-item label="标题" prop="title">
                <el-input v-model="bookInfo.title" placeholder="请输入标题" clearable />
            </el-form-item>
            <el-form-item label="作者" prop="author">
                <el-input v-model="bookInfo.author" placeholder="请输入作者" clearable />
            </el-form-item>
            <el-form-item label="ISBN" prop="isbn">
                <el-input v-model="bookInfo.isbn" placeholder="请输入ISBN" clearable />
            </el-form-item>
            <el-form-item label="分类" prop="categoryID">
                <el-select v-model="bookInfo.categoryID" placeholder="请选择分类" filterable>
                    <el-option
                        v-for="item in categoryList"
                        :key="item.categoryID"
                        :label="item.category"
                        :value="item.categoryID"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="语言" prop="language">
                <el-select v-model="bookInfo.language" placeholder="请选择语言" filterable>
                    <el-option v-for="item in languageList" :key="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="简介" prop="summary">
                <el-input v-model="bookInfo.summary" type="textarea" resize="none" rows="5" />
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="nextStep">下一步</el-button>
    </div>
</template>

<script>
import service from "@/utils/request";

export default {
    data() {
        return {
            bookInfo: {
                title: "",
                author: "",
                categoryID: "",
                summary: "",
                language: "",
                isbn: "",
            },
            categoryList: [],
            languageList: [
                "简体中文",
                "繁体中文",
                "英语",
                "日语",
                "俄语",
                "法语",
                "德语",
                "西班牙语",
                "葡萄牙语",
                "其他",
            ],
            isLoading: true,
            rules: {
                title: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("标题不能为空"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },
                author: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("作者不能为空"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },
                isbn: {
                    validator: (rule, value, callback) => {
                        if (value.length !== 13 && value.length !== 0) {
                            callback(new Error("请输入13位ISBN"));
                        } else if (!value.match(/[0-9]{13}/) && value.length !== 0) {
                            callback(new Error("ISBN需为13位数字"));
                        } else {
                            callback();
                        }
                    },
                    length: 13,
                    trigger: "blur",
                },
                categoryID: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请选择图书分类"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "change",
                },
                language: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请选择语言"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "change",
                },
                summary: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请输入简介"));
                        } else if (value.length < 10 || value.length > 500) {
                            callback(new Error("简介字数需在10-500字之间"));
                        } else {
                            callback();
                        }
                    },
                    min: 10,
                    max: 500,
                    trigger: "blur",
                },
            },
        };
    },
    async beforeMount() {
        // console.log(this.form);
        this.isLoading = true;
        this.categoryList = [];
        await service.get(`/category/list`).then((res) => {
            // console.log(res.data.data);
            this.categoryList = res.data.data;
        });
        if (sessionStorage.getItem("bookInfo") !== null) {
            this.bookInfo = JSON.parse(sessionStorage.getItem("bookInfo"));
        }
        this.isLoading = false;
    },
    methods: {
        nextStep() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    sessionStorage.setItem("bookInfo", JSON.stringify(this.bookInfo));
                    this.$emit("form", this.bookInfo);
                    this.$emit("step", 1);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.el-input {
    width: 40rem;
}
.el-select {
    width: 40rem;
}

.el-textarea {
    width: 40rem;
}
</style>
